<template>
  <div class="tab-back-box">
    <div class="tab-back" 
    :class="{
      'tab-back-slide-left':tabIndex === 0 && initOK,
      'tab-back-slide-right':tabIndex === 1}">
      <div class="back-left"><div class="back-left-color"></div></div>
      <div class="back-content"></div>
      <div class="back-right"><div class="back-right-color"></div></div>
    </div>
  </div>
</template>

<script>

export default {
  props:["tabIndex"],

  watch: {
    tabIndex(newV, oldV) {
      if(newV == 1) {
        this.initOK = true;
      }
    } 
  },

  data(){
    return {
      initOK: false,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.tab-back-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  .flex-center-start();
  overflow: hidden;

  &::before{
    content: '';
    width: 100%;
    height: 100%;
    background-color:#262336;
    position: absolute;
    left: 0;
    top: 0;
    animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }

  .tab-back{
    width: calc( 275px + 48px );
    transform: translateX(-32px);
    .flex-center-start();

    .back-left{
      margin-top: 16px;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: hidden;

      .back-left-color{
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: solid 7px white;
        position: absolute;
        right: -7px;
        bottom: -7px;
      }
    }
    .back-content{
      flex: 1;
      height: 32px;
      background-color: white;
      border-radius: 16px 16px 0 0;
    }

    .back-right{
      margin-top: 16px;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: hidden;

      .back-right-color{
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: solid 7px white;
        position: absolute;
        left: -7px;
        bottom: -7px;
      }
    }
  }
}

@keyframes slide-in-blurred-top {
  0% {
    transform: translateY(-32px);
  }
  100% {
    transform: translateY(0);
  }
}

.tab-back-slide-left {
  animation: slide-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-left {
  0% { transform: translateX(calc(275px - 16px));}
  100% {transform: translateX(-32px);}
}

.tab-back-slide-right {
  animation: slide-right 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
  0% {transform: translateX(-32px);}
  100% {transform: translateX(calc(275px - 16px));}
}

@media screen and (max-width: 1023px) {
  .tab-back-box{
    .tab-back{
      width: calc( 160px + 48px );
    }
  }

  @keyframes slide-left {
    0% { transform: translateX(calc(160px + 16px));}
    100% { transform: translateX(-32px);}
  }

  @keyframes slide-right {
    0% {transform: translateX(-32px);}
    100% {transform: translateX(calc(160px - 16px));}
  }
}
</style>